<template>
	<view :data-theme="theme">
		<view v-if="!successful">
			<scroll-view scroll-with-animation="true" scroll-y="true" :style="'height:' + windowHeight" @scroll="scroll">
				<form report-submit="true">
					<view class="merchantsSettled">
						<view class="merchantBg">
							<image class="bag" :src="merchantBg" alt="" srcset="" />
						</view>
						<view v-if="!merchantData.name" class="application-record" @click="jumpToList">
							申请记录
							<text class="iconfont icon-xiangyou"></text>
						</view>
						<view class="list">
							<view class="item">
								<view class="acea-row row-middle required">
									<text class="item-name">商户名称</text>
									<input
										:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
										type="text"
										:maxlength="isCn ? '16' : '16'"
										placeholder="商户名称"
										v-model="merchantData.name"
										@change="validateBtn"
										placeholder-class="placeholder"
									/>
								</view>
							</view>
							<view class="item">
								<view class="acea-row row-middle required">
									<text class="item-name">用户姓名</text>
									<input
										:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
										type="text"
										placeholder="用户姓名"
										v-model="merchantData.realName"
										@change="validateBtn"
										placeholder-class="placeholder"
									/>
								</view>
							</view>
							<view class="item">
								<view class="acea-row row-middle required">
									<text class="item-name">联系电话</text>
									<input
										:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
										type="number"
										class="texts"
										v-model="merchantData.phone"
										placeholder="联系电话"
										style="margin: 0; width: 252rpx"
									/>
								</view>
							</view>
							<view class="item rel" v-if="(isKey && parseFloat(merchantData.auditStatus) > 2) || (!isKey && !merchantData.auditStatus)">
								<view class="acea-row row-middle required">
									<text class="item-name">验证码</text>
									<input
										:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
										type="text"
										placeholder="验证码"
										v-model="merchantData.captcha"
										@change="validateBtn"
										class="codeIput"
										placeholder-class="placeholder"
									/>
									<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
										{{ text }}
									</button>
								</view>
							</view>
							<view class="item">
								<view class="uni-list">
									<view class="uni-list-cell">
										<view class="uni-list-cell-db acea-row row-middle required">
											<text class="item-name">商户分类</text>
											<picker
												:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
												@change="bindPickerChange"
												:value="merchantCategoryIndex"
												:range="merchantClassify"
												range-key="name"
											>
												<input placeholder="商户分类" type="text" readonly disabled v-model="merchantCategoryName" @change="validateBtn" />
												<view class="iconfont icon-xiangyou"></view>
											</picker>
										</view>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="uni-list">
									<view class="uni-list-cell">
										<view class="uni-list-cell-db acea-row row-middle required">
											<text class="item-name">商户类型</text>
											<picker
												:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
												@change="bindPickerChange1"
												:value="merchantTypeIndex"
												:range="merchantType"
												range-key="name"
											>
												<input placeholder="商户类型" type="text" readonly disabled v-model="merchantTypeName" @change="validateBtn" />
												<view class="iconfont icon-xiangyou"></view>
											</picker>
										</view>
									</view>
								</view>
							</view>
							<view class="item">
								<view class="acea-row row-middle">
									<text class="item-name">关键字</text>
									<input
										:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
										type="text"
										maxlength="30"
										placeholder="关键字"
										v-model="merchantData.keywords"
										placeholder-class="placeholder"
									/>
								</view>
							</view>
							<view class="item no-border">
								<text class="acea-row row-middle required item-title">请上传营业执照及行业相关资质证明图片</text>
								<text v-if="merchantTypeInfo" class="item-title">( {{ merchantTypeInfo }} )</text>
								<text class="item-desc">(图片最多可上传5张，格式支持JPG、PNG、JPEG)</text>
								<view class="upload">
									<view class="pictrue" v-for="(item, index) in pics" :key="index" :data-index="index" @click="getPhotoClickIdx">
										<image :src="item"></image>
										<text
											v-if="(isKey && parseFloat(merchantData.auditStatus) > 2) || (!isKey && !merchantData.auditStatus)"
											class="iconfont icon-guanbi1"
											@click.stop="DelPic(index)"
										></text>
									</view>
									<view
										class="pictrue acea-row row-center-wrapper row-column"
										@click="uploadpic"
										v-if="pics.length < 5 && ((isKey && parseFloat(merchantData.auditStatus) > 2) || (!isKey && !merchantData.auditStatus))"
									>
										<text class="iconfont icon-icon25201"></text>
										<view>上传凭证</view>
									</view>
								</view>
							</view>
							<view v-if="(isKey && parseFloat(merchantData.auditStatus) > 2) || (!isKey && !merchantData.auditStatus)" class="item no-border acea-row row-center row-middle">
								<checkbox-group @change="ChangeIsAgree" class="acea-row row-middle">
									<checkbox class="checkbox" :checked="isAgree ? true : false" />
									<span class="ml-4">已阅读并同意</span>
								</checkbox-group>
								<button class="settleAgree" @click="showProtocol = true">《入驻协议》</button>
							</view>
							<button
								v-if="(isKey && parseFloat(merchantData.auditStatus) > 2) || (!isKey && !merchantData.auditStatus)"
								:disabled="merchantData.auditStatus && parseFloat(merchantData.auditStatus) < 3"
								class="submitBtn"
								:class="successful === true ? 'on' : ''"
								@click="formSubmit"
							>
								提交申请
							</button>
						</view>
					</view>
				</form>
				<view class="settlementAgreement" v-if="showProtocol">
					<view class="setAgCount">
						<i class="icon iconfont icon-guanbi" @click="showProtocol = false"></i>
						<div class="title">商户入驻协议</div>
						<view class="content">
							<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
						</view>
					</view>
				</view>
				<view class="loadingicon acea-row row-center-wrapper" v-if="loading">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
			</scroll-view>
		</view>
		<view class="settledSuccessMain" v-else>
			<view class="settledSuccessful">
				<image class="image" src="../static/images/settledSuccessful.svg" alt="" />
				<view class="title">恭喜，您的资料提交成功！</view>
				<view class="info">预计15个工作日内审核完毕，平台客服会及时与您联系！</view>
				<view class="goHome" hover-class="none" @click="goHome">返回首页</view>
			</view>
		</view>
		<Verify @success="handlerOnVerSuccess" :captchaType="'clickWord'" :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
	</view>
</template>
<script>
import { agreementInfo } from '@/api/api.js';
import { toLogin } from '@/libs/login.js';
import { getMerSettledApplyApi, sendSettledCodeApi } from '@/api/merchant.js';

import { mapGetters } from 'vuex';
import parser from '../components/jyf-parser/jyf-parser';
import sendVerifyCode from '@/mixins/SendVerifyCode';
import Verify from '../components/verifition/verify.vue';
import { Debounce } from '@/utils/validate.js';
const app = getApp();
export default {
	components: {
		'jyf-parser': parser,
		Verify
	},
	watch: {
		'merchantData.name': function (val) {
			let pattern = new RegExp('[\u4E00-\u9FA5]+');
			let pattern2 = new RegExp('[A-Za-z]+');
			if (pattern.test(val)) {
				this.isCn = true;
			} else if (pattern2.test(val)) {
				this.isCn = false;
			}
		}
	},
	data() {
		return {
			windowHeight: app.globalData.windowHeight,
			isCn: true,
			text: '获取验证码',
			disabled: false,
			isAgree: false,
			showProtocol: false,
			isShowCode: false,
			loading: false,
			merchantData: {
				name: '',
				realName: '',
				phone: '',
				captcha: '',
				categoryId: 0,
				handlingFee: '',
				keywords: '',
				qualificationPicture: '',
				typeId: 0
			},
			validate: false,
			successful: false,
			codeVal: '',
			protocol: '',
			timer: '',
			merchantCategoryIndex: 0,
			merchantTypeIndex: 0,
			merchantCategoryName: '',
			merchantTypeName: '',
			pics: [],
			tagStyle: {
				img: 'width:100%;display:block;'
			},
			checkType: 'country',
			country: 'China',
			isType: false,
			merchantTypeInfo: '',
			theme: app.globalData.theme,
			merchantBg: '',
			isKey: ''
		};
	},
	mixins: [sendVerifyCode],
	beforeDestroy() {
		clearTimeout(this.timer);
	},
	computed: mapGetters(['globalData', 'isLogin', 'merchantClassify', 'merchantType', 'merSttledData']),
	mounted() {
		this.$store.dispatch('MerCategoryList');
		this.$store.dispatch('MerTypeList');
		this.merchantBg = `../static/images/${this.theme}.jpg`;
	},

	onShow() {
		if (!this.isLogin) {
			toLogin();
		}
		this.getConfig();
	},
	onLoad(options) {
		let that = this;
		uni.getSystemInfo({
			success: function (res) {
				that.windowHeight = res.windowHeight + 'px';
				console.log(that.windowHeight);
			}
		});
		if (options.key !== '1') {
			this.$store.commit('MERSTTLEDDATA', {});
			this.isKey = '';
		} else {
			this.isKey = options.key;
		}
		this.merchantData = Object.assign({}, this.merSttledData);
		if (this.merchantData.qualificationPicture) {
			this.pics = this.merchantData.qualificationPicture;
		}
		let idx = this.merchantData.categoryId;
		let index = this.merchantClassify.findIndex((item) => item.id == idx);
		this.merchantCategoryIndex = index;
		if (this.merchantClassify[index]) {
			this.merchantCategoryName = this.merchantClassify[index].name;
			this.merchantData.handlingFee = this.merchantClassify[index].handlingFee;
		}
		let idxn = this.merchantData.typeId;
		let indexn = this.merchantType.findIndex((item) => item.id == idxn);
		this.merchantTypeIndex = indexn;
		if (this.merchantType[indexn]) {
			this.merchantTypeName = this.merchantType[indexn].name;
			this.merchantTypeInfo = this.merchantType[indexn].info;
		}
	},
	methods: {
		scroll() {
			uni.$emit('scroll');
		},
		moveHandle() {},
		getConfig() {
			// 获取配置
			agreementInfo('merincomminginfo')
				.then((res) => {
					if (res.data) {
						this.protocol = JSON.parse(res.data).agreement;
					}
				})
				.catch((err) => {
					return this.$util.Tips({
						title: err
					});
				});
		},
		bindPickerChange: function (e) {
			this.index = e.target.value;
			let idx = e.target.value;
			if (this.merchantClassify[idx]) {
				this.merchantData.categoryId = this.merchantClassify[idx]['id'];
				this.merchantCategoryName = this.merchantClassify[idx]['name'];
				this.merchantData.handlingFee = this.merchantClassify[idx]['handlingFee'];
			}
		},
		bindPickerChange1: function (e) {
			this.merchantTypeIndex = e.target.value;
			let idx = e.target.value;
			if (this.merchantType[idx]) {
				this.merchantData.typeId = this.merchantType[idx]['id'];
				this.merchantTypeName = this.merchantType[idx]['name'];
				this.merchantTypeInfo = this.merchantType[idx]['info'];
			}
		},
		/*店铺类型说明*/
		getAgreement() {
			this.showProtocol = true;
			this.isType = true;
		},
		// 图片预览
		// 获得相册 idx
		getPhotoClickIdx(e) {
			let _this = this;
			let idx = e.currentTarget.dataset.index;
			_this.imgPreview(_this.pics, idx);
		},
		// 图片预览
		imgPreview: function (list, idx) {
			// list：图片 url 数组
			if (list && list.length > 0) {
				uni.previewImage({
					current: list[idx], //  传 Number H5端出现不兼容
					urls: list
				});
			}
		},
		toggleTab(str) {
			this.$refs[str].show();
		},
		// 首页
		goHome() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		/**
		 * 上传文件
		 *
		 */
		uploadpic: function () {
			let that = this;
			that.$util.uploadImageOne(
				{
					url: 'upload/image',
					name: 'multipart',
					model: 'user',
					pid: 0
				},
				function (res) {
					that.pics.push(res);
					that.$set(that, 'pics', that.pics);
				}
			);
		},
		/**
		 * 删除图片
		 *
		 */
		DelPic: function (index) {
			let that = this,
				pic = this.pics[index];
			that.pics.splice(index, 1);
			that.$set(that, 'pics', that.pics);
		},
		//滑块验证成功后
		handlerOnVerSuccess(data) {
			this.$refs.verify.hide();
			this.codeSend();
		},
		codeSend() {
			sendSettledCodeApi({
				phone: this.merchantData.phone
			})
				.then((res) => {
					this.$util.Tips({
						title: res.message
					});
					this.sendCode();
				})
				.catch((err) => {
					return this.$util.Tips({
						title: err
					});
				});
		},
		code: Debounce(function () {
			if (this.disabled) return;
			if (!this.merchantData.phone)
				return this.$util.Tips({
					title: '请填写手机号'
				});
			this.$refs.verify.show();
		}),
		onConfirm(val) {
			this.region = val.checkArr[0] + '-' + val.checkArr[1] + '-' + val.checkArr[2];
		},
		ChangeIsAgree: function (e) {
			this.isAgree = !this.isAgree;
			this.validateBtn();
		},

		formSubmit: Debounce(function (e) {
			if (this.validateForm() && this.validate) {
				if (this.pics.length == 0)
					return this.$util.Tips({
						title: '请上传资质图片'
					});
				if (this.pics) {
					this.merchantData.qualificationPicture = JSON.stringify(this.pics);
				}
				this.merchantData.address = this.country + ',' + this.address;
				getMerSettledApplyApi(this.merchantData)
					.then((data) => {
						this.loading = true;
						this.timer = setTimeout(() => {
							this.successful = true;
						}, 1000);
					})
					.catch((res) => {
						this.$util.Tips({
							title: res
						});
					});
			}
		}),
		validateBtn: function () {
			let that = this,
				value = that.merchantData;
			if (value.name && value.realName && value.categoryId && value.captcha && that.isAgree && value.typeId && value.pics) {
				if (that.codeVal) {
					that.validate = true;
				} else {
					that.validate = false;
				}
			}
		},

		validateForm: function () {
			let that = this,
				value = that.merchantData;

			if (!value.name)
				return that.$util.Tips({
					title: '请输入商户名称'
				});
			if (!value.realName)
				return that.$util.Tips({
					title: '请输入姓名'
				});
			if (!value.captcha)
				return that.$util.Tips({
					title: '请填写验证码'
				});
			if (!value.categoryId)
				return that.$util.Tips({
					title: '请选择商户分类'
				});
			if (!that.isAgree)
				return that.$util.Tips({
					title: '请勾选并同意入驻协议'
				});
			that.validate = true;
			return true;
		},
		jumpToList() {
			uni.navigateTo({
				url: '/pages/merchant/application_record/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.uni-scroll-view {
	overflow: hidden auto !important;
}
.select_code {
	width: 16px;
	height: 8px;
	display: inline-block;
	margin-left: 16rpx;
}

.flag {
	width: 40rpx;
	height: 26rpx;
	display: inline-block;
}

.uni-input-placeholder {
	color: #b2b2b2;
}

.item-name {
	width: 160rpx;
}

.uni-list-cell {
	position: relative;

	.iconfont {
		font-size: 14px;
		color: #7a7a7a;
		position: absolute;
		right: 15px;
		top: 7rpx;
	}

	.icon-guanbi2 {
		right: 35px;
	}
}

.merchantsSettled {
	@include main_bg_color(theme);
	height: 140vh;
}

.merchantsSettled .merchantBg {
	width: 100%;
	height: 900rpx;

	.bag {
		width: 100%;
		height: 100%;
	}

	.merchantBg-title {
		text-align: center;
		color: #fff;
		font-size: 60rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.merchantBg-join {
		text-align: center;
		color: #fff;
		font-size: 36rpx;
	}
}

.merchantsSettled .list {
	background-color: #fff;
	border-radius: 12px;
	margin: 0 24rpx;
	position: absolute;
	top: 417rpx;
	width: calc(100% - 24px);
}

.application-record {
	position: absolute;
	display: flex;
	align-items: center;
	top: 318rpx;
	right: 0;
	color: #fff;
	font-size: 22rpx;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 8rpx 18rpx;
	border-radius: 20px 0px 0px 20px;
}

.merchantsSettled .list .item {
	padding: 40rpx 0 12px;
	border-bottom: 1rpx solid #eee;
	position: relative;
	margin: 0 20rpx;

	&.no-border {
		border-bottom: none;
		padding-left: 0;
		padding-right: 0;
	}

	.item-title {
		color: #666666;
		font-size: 28rpx;
		display: block;
	}

	.item-desc {
		color: #b2b2b2;
		font-size: 22rpx;
		display: block;
		margin-top: 9rpx;
		line-height: 36rpx;
	}
}

.acea-row,
.upload {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-o-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.upload {
	margin-top: 20rpx;
}

.merchantsSettled .list .item .pictrue {
	width: 130rpx;
	height: 130rpx;
	margin: 24rpx 22rpx 0 0;
	position: relative;
	font-size: 11px;
	color: #bbb;

	&:nth-child(4n) {
		margin-right: 0;
	}

	&:nth-last-child(1) {
		border: 0.5px solid #ddd;
		box-sizing: border-box;
	}

	uni-image,
	image {
		width: 100%;
		height: 100%;
		border-radius: 1px;

		img {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			width: 100%;
			height: 100%;
		}
	}

	.icon-guanbi1 {
		font-size: 33rpx;
		position: absolute;
		top: -10px;
		right: -10px;
	}
}

.uni-list-cell-db {
	position: relative;
}

.wenhao {
	width: 34rpx;
	height: 34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	border-radius: 50%;
	background: #e3e3e3;
	color: #ffffff !important;
	margin-left: 4rpx;
	position: absolute;
	left: 122rpx;
}

.merchantsSettled .list .item .imageCode {
	position: absolute;
	top: 7px;
	right: 0;
}

.merchantsSettled .list .item .icon {
	font-size: 40rpx;
	color: #b4b1b4;
}

.merchantsSettled .list .item input {
	width: 470rpx;
	font-size: 30rpx;
}

.merchantsSettled .list .item .placeholder {
	color: #b2b2b2;
}

.merchantsSettled .default {
	padding: 0 30rpx;
	height: 90rpx;
	background-color: #fff;
	margin-top: 23rpx;
}

.merchantsSettled .default checkbox {
	margin-right: 15rpx;
}

.merchantsSettled .acea-row uni-image {
	// width: 20px;
	// height: 20px;
	display: block;
}

.merchantsSettled .list .item .codeIput {
	width: 125px;
}

.uni-input-input {
	display: block;
	height: 100%;
	background: none;
	color: inherit;
	opacity: 1;
	-webkit-text-fill-color: currentcolor;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-indent: inherit;
	text-transform: inherit;
	text-shadow: inherit;
}

.merchantsSettled .list .item .code {
	position: absolute;
	width: 93px;
	line-height: 27px;
	@include coupons_border_color(theme);
	border-radius: 15px;
	@include main_color(theme);
	text-align: center;
	bottom: 8px;
	right: 0;
	font-size: 12px;
}

.merchantsSettled .list .item .code.on {
	background-color: #bbb;
	color: #fff;
	border-color: #bbb;
}

.merchantsSettled .submitBtn {
	width: 588rpx;
	margin: 25px auto 25px auto;
	height: 86rpx;
	border-radius: 25px;
	text-align: center;
	line-height: 86rpx;
	font-size: 15px;
	color: #fff;
	@include main_bg_color(theme);
}

.merchantsSettled .submitBtn.on {
	@include main_bg_color(theme);
}

uni-checkbox-group,
.settleAgree {
	display: inline-block;
	font-size: 24rpx;
}

uni-checkbox-group {
	color: #b2b2b2 !important;
}

checkbox /deep/.uni-checkbox-input.uni-checkbox-input-checked {
	@include coupons_border_color(theme);
	@include main_color(theme);
}

.settleAgree {
	@include main_color(theme);
}

.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
	width: 30rpx;
	height: 30rpx;
	border: 2rpx solid #c3c3c3;
	border-radius: 15px;
}

.settlementAgreement {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

.settlementAgreement .setAgCount {
	background: #fff;
	width: 656rpx;
	height: 458px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 12rpx;
	-webkit-border-radius: 12rpx;
	padding: 20rpx 52rpx !important;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow-y: scroll;

	.content {
		height: 740rpx !important;
		overflow-y: scroll;

		/deep/ p {
			font-size: 13px;
			line-height: 22px;
		}

		/deep/ img {
			max-width: 100%;
		}
	}
}

.settlementAgreement .setAgCount .icon {
	font-size: 24rpx;
	color: #b4b1b4;
	position: absolute;
	top: 40rpx;
	right: 15rpx;
}

.settlementAgreement .setAgCount .title {
	color: #333;
	font-size: 32rpx;
	text-align: center;
	font-weight: bold;
}

.settlementAgreement .setAgCount .content {
	margin-top: 32rpx;
	color: #333;
	font-size: 26rpx;
	line-height: 22px;
	text-align: justify;
	text-justify: distribute-all-lines;
	height: 756rpx;
	overflow-y: scroll;
}

.settledSuccessMain {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.settledSuccessful {
	flex: 1;
	width: 100%;
	padding: 0 56px;
	height: auto;
	background: #fff;
	text-align: center;
}

.settledSuccessful .image {
	width: 189px;
	height: 157px;
	margin-top: 66px;
}

.settledSuccessful .title {
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	margin-top: 35px;
}

.settledSuccessful .info {
	color: #a0a0a0;
	font-size: 13px;
	margin-top: 12px;
}

.settledSuccessful .goHome {
	margin: 60px auto 0;
	line-height: 43px;
	color: #282828;
	font-size: 15px;
	border: 1px solid #b4b4b4;
	border-radius: 60px;
}

/deep/ uni-checkbox .uni-checkbox-input {
	width: 15px;
	height: 15px;
	margin-right: 10rpx;
	position: relative;
}

/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
	font-size: 14px;
}

.loadingicon {
	height: 100vh;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.icon-xiangyou {
	font-size: 22rpx;
}

// #ifdef MP
checkbox-group {
	display: inline-block;
}

// #endif
.setAgCount {
	/deep/ table {
		border: 1rpx solid #ddd;
		border-bottom: none;
		border-right: none;
	}

	/deep/ td,
	th {
		padding: 5rpx 10rpx;
		border-bottom: 1rpx solid #ddd;
		border-right: 1rpx solid #ddd;
	}
}

.required::before {
	content: '* ';
	color: red;
	margin-right: 4rpx;
}

/deep/.uni-input-input {
	width: 85%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
